<template>
    <div class="app-container">
      <el-row :gutter="20" style="height:100%">
  <!--      内容-->
        <el-col :span="18" :xs="24" style="height:100%">
          <div class="container">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="传感器告警" name="first">
                <!-- 搜索 -->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <Search
                        :search-data="searchData"
                        :search-params="queryParams"
                        @change="searchParamsUpdate"
                        @selectChange="selectChange"
                    >
                    </Search>
                  </el-col>
                </el-row>
                <!--    增加-->
                <el-row :gutter="10" >
                  <el-col :span="1">
                    <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
                  </el-col>
                </el-row>
                <!--      表格-->
                <el-table
                    :data="tableData"
                    style="width: 100%;color: #999;background: #002127;"
                    height="630px"
                    :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                    :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }"
                >
                  <el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns[0].visible" sortable />
                  <el-table-column prop="deviceId" label="设备ID" align="center" v-if="columns[1].visible" sortable />
                  <el-table-column prop="channelName" label="传感器名称" align="center" v-if="columns[2].visible" />
                  <el-table-column prop="value" label="告警值" align="center" v-if="columns[3].visible" />
                  <el-table-column prop="ultraLimit" label="超限设定值" align="center" v-if="columns[4].visible" />
                  <el-table-column prop="electricity" label="电量" align="center" v-if="columns[5].visible" />
                  <el-table-column prop="signal" label="信号" align="center" v-if="columns[6].visible" />
                  <el-table-column prop="time" label="时间" align="center" v-if="columns[7].visible" show-overflow-tooltip />
                  <el-table-column prop="warnStatus" label="告警状态" align="center" v-if="columns[8].visible" sortable />
                  <el-table-column prop="warnLevel" label="告警级别" align="center" v-if="columns[9].visible" />
                  <el-table-column prop="realOld" label="实时/历史" align="center" v-if="columns[10].visible" />
                </el-table>
                <!--    分页-->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <pagination
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.limit"
                        @pagination="getList"
                    />
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="设备告警" name="second">
                <!-- 搜索 -->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <Search
                        :search-data="searchData1"
                        :search-params="queryParams1"
                        @change="searchParamsUpdate1"
                    >
                    </Search>
                  </el-col>
                </el-row>
                <!--    增加-->
                <el-row :gutter="10">
                  <el-col :span="1">
                    <right-toolbar :showSearch.sync="showSearch1" :columns="columns1"></right-toolbar>
                  </el-col>
                </el-row>
                <!--      表格-->
                <el-table
                    :data="tableData1"
                    style="width: 100%;color: #999;background: #002127;"
                    height="630px"
                    :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                    :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }"
                >
                  <el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns1[0].visible" sortable />
                  <el-table-column prop="deviceId" label="设备ID" align="center" v-if="columns1[1].visible" sortable />
                  <el-table-column prop="electricity" label="电量" align="center" v-if="columns1[2].visible" />
                  <el-table-column prop="voltage" label="电压" align="center" v-if="columns1[3].visible" />
                  <el-table-column prop="signal" label="信号" align="center" v-if="columns1[4].visible"/>
                  <el-table-column prop="time" label="数据上报时间" align="center" v-if="columns1[5].visible" show-overflow-tooltip />
                  <el-table-column prop="warnStatus" label="告警状态" align="center" v-if="columns1[6].visible" sortable />
                  <el-table-column prop="eultra" label="eultra" align="center" v-if="columns1[7].visible" />
                  <el-table-column prop="vultra" label="vultra" align="center" v-if="columns1[8].visible" />
                  <el-table-column prop="sultra" label="sultra" align="center" v-if="columns1[9].visible" />
                </el-table>
                <!--    分页-->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <pagination
                        v-show="total1>0"
                        :total="total1"
                        :page.sync="queryParams1.page"
                        :limit.sync="queryParams1.limit"
                        @pagination="getList1"
                    />
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
  <!--      折线图-->
        <el-col :span="6" :xs="24" style="height:100%">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="24" :xs="24">
              <div class="container">
                <div class="title">曲线分析</div>
                <div id="main" style="width: 100%;height:350px;"></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :xs="24">
              <div class="container">
                <div class="title">30天告警趋势分析</div>
                <div id="mains" style="width: 100%;height:350px;"></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
  
    </div>
  </template>
  
  <script>
  import {getSensorWarnOld, getDeviceWarnOld, getAllDevice, getChannelParameters} from '@/api/dev/index'
  import Search from '@/components/PageSearch'
  import RightToolbar from '@/components/RightToolbar'
  import Pagination from "@/components/Pagination/index";
  export default {
    name: "history",
    components: { Search, RightToolbar, Pagination },
    data() {
      return {
        // 绑定值，选中选项卡的 name
        activeName: 'first',
        // 搜索
        searchData: [
          {
            type: 'select',
            label: '设备id',
            prop: 'deviceId',
            options: [],
            placeholder: '请选择设备筛选'
          },
          {
            type: 'select',
            label: '设备通道',
            prop: 'channel',
            options: [],
            placeholder: '请选择设备通道筛选'
          },
          {
            type: 'datetime',
            label: '开始时间',
            prop: 'startTime',
            placeholder: '请选择开始时间'
          },
          {
            type: 'datetime',
            label: '结束时间',
            prop: 'endTime',
            placeholder: '请选择结束时间'
          }
        ],
        // 分页总条数
        total: 0,
        // 查询参数
        queryParams: {
          limit: 20,
          page: 1,
          channel: '',
          deviceId: '',
          startTime: '',
          endTime	: ''
        },
        // 显示搜索条件
        showSearch: true,
        // 列信息
        columns: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `设备ID`, visible: true },
          { key: 2, label: `传感器名称`, visible: true },
          { key: 3, label: `告警值`, visible: true },
          { key: 4, label: `超限设定值`, visible: true },
          { key: 5, label: `电量`, visible: true },
          { key: 6, label: `信号`, visible: true },
          { key: 7, label: `时间`, visible: true },
          { key: 8, label: `告警状态`, visible: true },
          { key: 9, label: `告警级别`, visible: true },
          { key: 10, label: `实时/历史`, visible: true }
        ],
        // 表格
        tableData: [],
        searchData1: [
          {
            type: 'select',
            label: '设备id',
            prop: 'deviceId',
            options: [],
            placeholder: '请选择设备筛选'
          },
          {
            type: 'select',
            label: '告警状态',
            prop: 'warnStatus',
            options: [{value: 1, label: '电压预警'}, {value: 2, label: '电压告警'},
              {value: 3, label: '信号预警'},{value: 4, label: '信号告警'}],
            placeholder: '请选择告警状态筛选'
          },
          {
            type: 'datetime',
            label: '开始时间',
            prop: 'startTime',
            placeholder: '请选择开始时间'
          },
          {
            type: 'datetime',
            label: '结束时间',
            prop: 'endTime',
            placeholder: '请选择结束时间'
          }
        ],
        total1: 0,
        queryParams1: {
          limit: 20,
          page: 1,
          warnStatus: '',
          deviceId: '',
          startTime: '',
          endTime	: ''
        },
        showSearch1: true,
        columns1: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `设备ID`, visible: true },
          { key: 2, label: `电量`, visible: true },
          { key: 3, label: `电压`, visible: true },
          { key: 4, label: `信号`, visible: true },
          { key: 5, label: `数据上报时间`, visible: true },
          { key: 6, label: `告警状态`, visible: true },
          { key: 7, label: `eultra`, visible: true },
          { key: 8, label: `vultra`, visible: true },
          { key: 9, label: `sultra`, visible: true }
        ],
        tableData1: [],
        // 下拉搜索
        deviceOption: [],
        channelOption: [],
        deviceOptions: [],
      }
    },
    props: {},
    watch: {
      deviceOption: {
        handler(val) {
          this.searchData[0].options = this.deviceOption
        },
        immediate: true
      },
      channelOption: {
        handler(val) {
          this.searchData[1].options = this.channelOption
        },
        immediate: true
      },
      deviceOptions: {
        handler(val) {
          this.searchData1[0].options = this.deviceOptions
        },
        immediate: true
      },
    },
    created() {
      this.getDeviceOption()
      let yesterday = new Date(new Date().setDate(new Date().getDate() - 1))
      this.queryParams.startTime = this.$moment(yesterday).format("YYYY-MM-DD HH:mm:ss")
      this.queryParams1.startTime = this.$moment(yesterday).format("YYYY-MM-DD HH:mm:ss")
      this.queryParams.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      this.queryParams1.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
    },
    mounted() {
      this.chartA()
      this.chartB()
    },
    methods: {
      // tab选项卡
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //设备下拉
      getDeviceOption() {
        const data = {
          limit: 500,
          page: 1
        }
        getAllDevice(data).then(res => {
          const data = res.data
          this.deviceOption = data.map(item => {
            return {
              value: item.deviceId,
              label: item.deviceName
            }
          })
          this.deviceOptions = data.map(item => {
            return {
              value: item.deviceId,
              label: item.deviceName
            }
          })
        }).catch(err => {
          console.log(err)
        })
      },
      // 通道下拉选择
      getChannelOption() {
        getChannelParameters(this.queryParams.deviceId).then(res => {
          const data = res.data
          this.channelOption = data.map(item => {
            return {
              value: item.channelNo,
              label: item.channelName
            }
          })
          // this.queryParams.channel = this.channelOption[0].value
        }).catch(err => {
          console.log(err)
        })
      },
      selectChange(val,item) {
        // if (item === 'channel') {
        //   this.getChannelOption(val)
        // }
        this.getChannelOption()
      },
      getList() {
        getSensorWarnOld(this.queryParams).then((res) => {
          console.log(res)
          this.total = res.dataCounts
          this.tableData = res.data || []
          res.data.map(item => {
            if (item.warnStatus === 1) {
              item.warnStatus = '上限告警'
            } else if (item.warnStatus === 2) {
              item.warnStatus = '下限告警'
            } else if (item.warnStatus === 3) {
              item.warnStatus = '波动告警'
            } else if (item.warnStatus === 4) {
              item.warnStatus = '上限预警'
            } else if (item.warnStatus === 5) {
              item.warnStatus = '下限预警'
            }
            if (item.warnLevel === 1) {
              item.warnLevel = '告警'
            } else if (item.warnLevel === 2) {
              item.warnLevel = '预警'
            }
            if (item.realOld === 0) {
              item.realOld = '首次上传'
            } else if (item.realOld === 1) {
              item.realOld = '实时'
            } else if (item.realOld === 2) {
              item.realOld = '历史'
            }
          })
        }).catch((err) => {
          console.log(err)
          // this.$message.error(err.errorMsg)
        })
      },
      getList1() {
        getDeviceWarnOld(this.queryParams1).then((res) => {
          console.log(res)
          this.total1 = res.dataCounts
          this.tableData1 = res.data || []
          res.data.map(item => {
            if (item.warnStatus === 1) {
              item.warnStatus = '电压预警'
            } else if (item.warnStatus === 2) {
              item.warnStatus = '电压告警'
            } else if (item.warnStatus === 3) {
              item.warnStatus = '信号预警'
            } else if (item.warnStatus === 4) {
              item.warnStatus = '信号告警'
            }
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      searchParamsUpdate(){
        this.getList()
      },
      searchParamsUpdate1(){
        this.getList1()
      },
      //  曲线分析
      chartA() {
        const myChart = this.$echarts.init(document.getElementById('main'))  // 先获得这个dom元素并初始化
        // 指定图表的配置项和数据
        myChart.setOption({
          backgroundColor:'#002127',
          // title: {
          //   text: '曲线分析',
          //   textStyle:{
          //     color: '#000',
          //     fontSize: 14
          //   }
          // },
          // 指示线
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: "#006675"
              }
            }
          },
          // 折线颜色
          color: ['#006675'],
          // 图表距离容器距离
          grid: {
            left: '2%',
            right: '2%',
            top: '5%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [{
            show: true,
            type: 'category',
            // 隐藏横向网格线
            splitLine: {
              show: false
            },
            data: ['2001/04/05', '2001/04/05', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],
            // x轴字体设置
            axisLabel: {
              rotate: 0, //倾斜角度
              color: '#ffffff',
            },
            // 横坐标刻度线
            axisTick: {
              show: false
            },
            // 坐标轴
            axisLine: {
              lineStyle: {
                color: '#999999',
              }
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          }],
          yAxis: [{
            // name: '(mA)',
            type: 'value',
            // min: 0,
            // max: 250,
            // y轴字体设置
            axisLabel: {
              color: '#ffffff',
            },
            // y轴线条
            axisLine: {
              show: false
            },
            // 刻度线
            axisTick: {
              show: true
            },
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#999999',
                type:'dashed',
              }
            }
          }],
          series: [
            {
              name: '设备数',
              type: 'line',
              smooth: true,
              symbolSize: 4,
              data: ['40', '80', '50', '170', '70', '100', '80', '180', '40', '10'],
            },
            {
              name:'上限值',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              itemStyle: {
                color: '#ffc500',
                borderColor: "#fff",
                borderWidth: 1,
              },
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
            },
            {
              name:'下限值',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              itemStyle: {
                color: '#ff5b29',
                borderColor: "#fff",
                borderWidth: 1,
              },
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
          ]
        });
      },
    //
      chartB() {
        const myChart = this.$echarts.init(document.getElementById('mains'))  // 先获得这个dom元素并初始化
        // 指定图表的配置项和数据
        myChart.setOption({
          backgroundColor:'#002127',
          // 指示线
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: "#006675"
              }
            }
          },
          legend: {
            data: ['属性告警', '传感器告警', '传感器预警'],
            textStyle: {
              color: '#ffffff',
              fontSize: '20px',
              fontWeight: 700
            }
          },
          // 折线颜色
          color: ['#006675'],
          // 图表距离容器距离
          grid: {
            left: '2%',
            right: '2%',
            top: '13%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [{
            show: true,
            type: 'category',
            // 隐藏横向网格线
            splitLine: {
              show: false
            },
            data: ['2001/04/05', '2001/04/05', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],
            // x轴字体设置
            axisLabel: {
              rotate: 0, //倾斜角度
              color: '#ffffff',
            },
            // 横坐标刻度线
            axisTick: {
              show: false
            },
            // 坐标轴
            axisLine: {
              lineStyle: {
                color: '#999999',
              }
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          }],
          yAxis: [{
            // name: '(mA)',
            type: 'value',
            // min: 0,
            // max: 250,
            // y轴字体设置
            axisLabel: {
              color: '#ffffff',
            },
            // y轴线条
            axisLine: {
              show: false
            },
            // 刻度线
            axisTick: {
              show: false
            },
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#999999',
                type:'dashed',
              }
            }
          }],
          series: [
            {
              name: '属性告警',
              type: 'line',
              smooth: true,
              symbolSize: 4,
              // emphasis: {
              //   focus: 'series'
              // },
              data: ['40', '80', '50', '170', '70', '100', '80', '180', '40', '10'],
            },
            {
              name:'传感器告警',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              // emphasis: {
              //   focus: 'series'
              // },
              itemStyle: {
                color: '#ffc500',
                borderColor: "#fff",
                borderWidth: 1,
              },
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
            },
            {
              name:'传感器预警',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              // emphasis: {
              //   focus: 'series'
              // },
              itemStyle: {
                color: '#ff5b29',
                borderColor: "#fff",
                borderWidth: 1,
              },
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
          ]
        });
      },
    }
  }
  </script>
  
  <style lang='less' scoped>
  .app-container{
    width: 100%;
    min-height: 100%;
    // padding: 15px;
    box-sizing: border-box;
    background: #0C323A;
    .container {
      width: 100%;
      background: #002127;
      // padding: 10px;
      border-radius: 10px;
      overflow: hidden;
      .title {
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #999999;
        color: #ffffff;
        font-size: 14px;
      }
      // 面板左对齐
      ::v-deep .el-tabs__nav-scroll {
        justify-content: flex-start;
      }
      // 面板内容距离标题
      ::v-deep .el-tab-pane {
        margin-top: 15px;
      }
      //面板标题字颜色
      ::v-deep .el-tabs__item {
        color: #999999;
      }
      //鼠标经过面板标题字颜色，选中后字颜色
      ::v-deep .el-tabs__item:hover,
      ::v-deep .el-tabs__item.is-active {
        color: #FFFFFF;
      }
      // 线条颜色
      ::v-deep .el-tabs__nav-wrap::after {
        background-color: #002127;
      }
      // 点击tab时线条颜色
      ::v-deep .el-tabs__active-bar {
        background-color: #00E7E7;
      }
      // 显隐列
      .el-col-1 {
        float: right;
      }
    }
  }
  // 表格设置鼠标经过时背景颜色
  ::v-deep.el-table tbody tr:hover>td{
    background-color: #02565c !important;
  }
  //表格改变每行底边框颜色
  ::v-deep.el-table  td, .el-table th.is-leaf  {
    border-bottom:  1px solid rgba(0,231,231,0.302)!important;
  }
  /*table边框颜色*/
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: #002127;
  }
  ::v-deep .el-tabs__nav-scroll{
    margin-left: 10px;
  }

  </style>
  